* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #66c7f4;
}

@ballSize: 10px; //小球的尺寸
@containerSize: 150px; // 容器的尺寸
@n: 36; // 小球的个数
@pdeg: (360deg / @n); // 每个小球旋转的角度
@ani-duration: 2000ms; // 动画时长

.loading {
    width: @containerSize;
    height: @containerSize;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    // outline: 1px solid #fff;

    .dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: @ballSize;
        height: @ballSize;
        margin-left: -(@ballSize/2);
        margin-top: -(@ballSize/2);
        // background-color: red;
        perspective: 70px;
        transform-style: preserve-3d;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        &::before {
            background: #000;
            top: -100%;
            animation: moveBlack @ani-duration infinite;
        }

        &::after {
            background: #fff;
            top: 100%;
            animation: moveWhite @ani-duration infinite;
        }
    }
}

// 尝试写前两个小球的分布位置
// .dot:nth-child(1) {
//     transform: rotate(15deg) translateY((-@containerSize/2));
// }

// .dot:nth-child(2) {
//     transform: rotate(30deg) translateY((-@containerSize/2));
// }

// 使用scss循环搞定每个小球分布的位置 , 递归调用
.loop(@i) when(@i <=@n) {
    .dot:nth-child(@{i}) {
        transform: rotate(@pdeg * @i) translateY((-@containerSize/2));

        // 实现交替动画
        &::before,
        &::after {
            animation-delay: -(@ani-duration / @n) * @i * 6;
        }
    }

    .loop(@i+1);
}

.loop(1);

// 黑球动画
@keyframes moveBlack {
    0% {
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate3d(0, 100%, @ballSize);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate3d(0, 200%, 0);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate3d(0, 100%, -@ballSize);
        animation-timing-function: ease-out;
    }
}

// 白球动画
@keyframes moveWhite {
    0% {
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate3d(0, -100%, -@ballSize);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate3d(0, -200%, 0);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate3d(0, -100%, @ballSize);
        animation-timing-function: ease-out;
    }
}

/*
    - 使用less进行除法运算的时候: 需要加上括号 -(@ballSize/2); 
    - 类名为loading的容器绘制成一个圆
    - 把dot元素渲染成小红点 , 平均分布到容器的边框上形成一个红色的圈环
        - 每次旋转多少度呢 ? 360度 / 小球个数
        - 使用scss循环搞定每个小红点分布的位置
    - 黑球使用::before实现 , 白球使用::after实现 , 给黑白两球定位
    - 给黑球和白球加上动画效果
    - 给dot元素加上3D效果
    - 设置不同的延迟,实现交替效果
*/